<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript">
    	
   		document.addEventListener('plusready', function(){
   			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
   			
   		});
   		
    </script>
</head>
<body>
	
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript">
	
    </script>
    <style type="text/css">
    	*{
    		margin: 0;
    		padding: 0;
    		border: none;
    	}
    	html,body{
    		width: 100%;
    		height: 100%;
    	}
    	#beijing{
    		position: absolute;
    		bottom: 0;
    		top:0;
    		width: 100%;
    		height: 100%;
    		background: url(11.png)no-repeat;
    		background-size: 100% 100%;
    	}
    	  	
    	.p_yuanquna{
    		position: absolute;
    		bottom: 0;
    		top:0;
    		width: 100%;
    		height: 100%;
    		background: url(33.png)no-repeat;
    		background-size:  100% 100%;
    	}
    	.p_sigeyuan{
    	    position: absolute;
    		bottom: 0;
    		top:0;
    		width: 100%;
    		height: 100%;
    		background: url(55.png)no-repeat;
    		/* z-index:2;*/
    		background-size:  100% 100%;
    	}
    	
    	.p_hanzi{
    		 position: absolute;
    		bottom: 0;
    		top:0;
    		width: 100%;
    		height: 100%;
    		background: url(44.png)no-repeat;
    	/*	 z-index:3;*/
    		background-size:  100% 100%;
    	}
    	.p_zimu{
    		position: absolute;
    		top: 0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		margin: auto;
    		width: 100%;
    		height: 100%;
    		background: url(22.png)no-repeat;
    		background-size:  100% 100%;
    		animation: ja 3s linear infinite;
    		-webkit-animation: ja 3s linear infinite;
    	}
    	@-webkit-keyframes ja{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}
    	@keyframes ja{
    		0%{
    			transform: scale(1);
    		}
    		25%{
    			transform: scale(1.1);
    		}
    		50%{
    			transform: scale(1);
    		}
    		75%{
    			transform: scale(0.9);
    		}
    		100%{
    			transform: scale(1);
    		}
    	}
    	.p_denglong{
    		position: absolute;
    		bottom: 0;
    		top:0;
    		width: 100%;
    		height: 100%;
    		background: url(77.png)no-repeat;
    		background-size:  100% 100%;
    	}
    	.p_caiyun{
    		position: absolute;
    		bottom: 0;
    		top:0;
    		width: 100%;
    		height: 100%;
    		background: url(66.png)no-repeat;
    		background-size:  100% 100%;
    	}
    	
    
    
    
    
    <style>canvas{
	background-color:#000000;
	z-index:9999;}
</style>
<canvas id="canvas-keleyi-com"></canvas>
<script>
var c = document.getElementById('canvas-ke'+'leyi-com');
if (!c.getContext) alert('请使用支持HTML5的浏览器，例如Chrome，IE9以上。');
else(function(c, cvs) {
//随着窗口调整画布大小
var W, H;
var up = 0; 
//(onresize = function() {
//     c.width = W = window.innerWidth;
//     c.height = H = window.innerHeight;
//    })();
c.width=W=350;
c.height=H=500;
//生成一个烟花
function createPT(x, y, r, g, b) {
return {
r: r,g: g,b: b,
x: x,y: y,
//轨迹序列
pl: [],
dx: rnd(20) - 10,
dy: rnd(10) - 7,
life: 30 + rnd(30),
//移动函数，修改加速度和坐标
move: function() {
this.dx *= .98;
this.dy *= .98;
this.dy += .22;
this.x += this.dx;
this.y += this.dy;
this.pl.push([this.x, this.y]);
//保持轨迹长度
if (this.pl.length > 10) this.pl.shift();
this.life--;
}
};
}
//总烟火数组
var B = [];
//在x,y位置创建一个烟火
function createBoom(x, y) {
var q = [],
r = rnd(255) | 0,
g = rnd(255) | 0,
b = rnd(255) | 0;
for (var i = 0; i < rnd(16) + 15; i++) q.push(createPT(x, y, r, g, b));
B.push(q);
}
setInterval(function() {
cvs.clearRect(0, 0, W, H);
//依次绘制烟火
for (var n = 0; n < B.length; n++) {
var q = B[n];
for (var i = 0; i < q.length; i++) {
var pt = q[i];
pt.move();
dq(pt.pl, pt.life / 30, pt.r, pt.g, pt.b);
//超过生存周期就消失 柯 乐 义
if (pt.life <= 0) q.splice(i, 1);
}
//当一个烟火包含的烟花个数为零，则消灭这个烟火
if (!B[n].length) B.splice(n, 1);
}
//每隔一段时间添加一个新烟火
if (new Date - up < 2000 + rnd(2000)) return;
up = new Date;
createBoom(rnd(W / 2) + W / 4, rnd(50) + 50);
},20);
function rnd(n) {
return (n || 1) * Math.random();
}
function dq(ar, z, r, g, b) {
cvs.save();
//绘制轨迹。思路是每次都绘制一条透明的轨迹，叠加起来形成一条渐变的样子
for (var i = 0; i < ar.length; i++) {
cvs.strokeStyle = 'rgba(' + r + ',' + g + ',' + b + ',' + Math.abs(.2 * z) + ')';
cvs.lineWidth = Math.min(i + 1, 4)*2;
cvs.beginPath();
cvs.moveTo(ar[i][0], ar[i][1]);
for (var j = i + 1; j < ar.length; j++) cvs.lineTo(ar[j][0], ar[j][1]);
cvs.stroke();
}
cvs.restore();
}
})(c, c.getContext('2d'));</script>	
    	
    	
    	
    	
    	
    	
    </style>
</head>
<body><a href="second.html">
	<!--<audio id="player" src="static/牧羊曲-纯音乐-274655.mp3" autoplay="autoplay" loop="loop"></audio>-->
	<div id="#beijing">

	<canvas id="canvas"></canvas>	
		<div class="p_yuanquna"></div>
		<div class="p_zimu"></div>
		<div class="p_sigeyuan"></div>
		<div class="p_hanzi"></div>
		<div class="p_denglong"></div>
		<div class="p_caiyun"></div>
		
		

		
	</div>
	</a>
</body>
</html>